<template>
  <div>
    <div class="form-wrap">
      <div class="all-day">
        <span class="label">24小时营业</span>
        <i-switch v-model="allDayOpen" size="small" @change="handleSwitch"></i-switch>
      </div>
      <div class="input-block-plain">
        <span class="label">开始时间</span>
        <picker
          v-model="startServiceTime"
          class="input-time-picker"
          mode="time"
          start="00:00"
          :end="end"
          @change="handleTimeChange1"
        >
          <span class="placeholder">{{start}}</span>
        </picker>
      </div>
      <div class="input-block-plain">
        <span class="label">结束时间</span>
        <picker
          v-model="endServiceTime"
          class="input-time-picker"
          mode="time"
          :start="start"
          end="23:59"
          @change="handleTimeChange2"
        >
          <span class="placeholder">{{end}}</span>
        </picker>
      </div>
      <button class="btn-round-blue" @click="handleUpdateShopInfo">完成</button>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { UPDATE_SHOP_BASE_INFO } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return { allDayOpen: false, startServiceTime: '', endServiceTime: '' }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    start () {
      return this.startServiceTime.replace(/(:00$)/g, '')
    },
    end () {
      return this.endServiceTime.replace(/(:00$)/g, '')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
  },
  methods: {
    handleSwitch (e) {
      let val = e.target.value
      this.allDayOpen = val
      if (val) {
        this.startServiceTime = '00:00:00'
        this.endServiceTime = '23:59:00'
      }
    },
    handleTimeChange1 (e) {
      let val = e.target.value
      this.startServiceTime = val + ':00'
      if (val !== '00:00') {
        this.allDayOpen = false
      }
    },
    handleTimeChange2 (e) {
      let val = e.target.value
      this.endServiceTime = val + ':00'
      if (val !== '23:59') {
        this.allDayOpen = false
      }
    },
    handleUpdateShopInfo () {
      this.updateShopInfo()
    },
    updateShopInfo () {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        startServiceTime: vm.startServiceTime,
        endServiceTime: vm.endServiceTime
      }

      UPDATE_SHOP_BASE_INFO(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$toast('操作成功')
            vm.$store.commit('SET_ACCOUNT_INFO', {
              startServiceTime: vm.startServiceTime,
              endServiceTime: vm.endServiceTime
            })
            vm.shopName = ''
            vm.$router.go(-1)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    init () {
      this.startServiceTime = this.account.startServiceTime
      this.endServiceTime = this.account.endServiceTime
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .all-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .label {
      color: $gray;
      font-size: 15px;
    }
  }
  > .input-block-plain {
    display: flex;
    width: 100%;
    height: 36px;
    align-items: center;
    justify-content: flex-start;
    &:nth-child(2) {
      margin-bottom: 15px;
    }
    > .label {
      width: 100px;
    }
    > .input-time-picker {
      flex-grow: 1;
      .placeholder {
        font-size: 15px;
      }
    }
  }
}
</style>